<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">绑定银行卡</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>

	<view v-show="type==0">
		<u-notice-bar mode="horizontal" :text="tipStr"></u-notice-bar>
	</view>
	<view v-show="type==1">
		<u-notice-bar mode="horizontal" :text="tipStr2"></u-notice-bar>
	</view>
	
		<view class="form">
			<!--银行卡-->
			<u--form labelPosition="left" :model="form" ref="uForm" :rules="rules" v-show="type==0">
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">预留手机号</view>
						<view class="inputBox">
							<u--input class="inputStyle" v-model="form.reserveMobile" placeholder="请输入预留手机号"
								color="#333" type="number" border="none"></u--input>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<view class="formInput imgCode">
						<view class="label">图形验证码</view>
						<view class="inputBox">
							<u--input class="inputStyle" cursor-spacing="10" border="none" type="number" maxlength="6"
								placeholder="请输入图形验证码" v-model="form.loginCode" />
							<view class="image-box">
								<image class="codeImg" @tap="getLoginCode" :src="loginCodeSrc" mode="heightFix"></image>
							</view>
						</view>

					</view>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<view class="formInput send-con">
						<view class="label">验证码</view>
						<view class="inputBox">
							<u--input class="inputStyle" border="none" :clearable="false" type="number"
								placeholder="请输入验证码" v-model="form.verifyCode" maxlength="6" />
							<u-code change-text="x秒后" ref="uCode" @change="codeChange">
							</u-code>
							<text class="send" @tap="getCode">{{tips}}</text>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">银行卡号</view>
						<view class="inputBox">
							<u--input class="inputStyle" v-model="form.cardNumber" placeholder="请输入银行卡号" color="#333"
								type="text" border="none"></u--input>

						</view>
					</view>
				</u-form-item>
				<view class="zcxy">
					<view class="check-box">
						<u-checkbox-group size="14px" @change="checkChange">
							<u-checkbox :checked="form.checked" inactiveColor="#000000" labelColor="#000000"
								labelSize="12px" size="14px" activeColor="#C09B3A" shape="circle" label="已阅读并同意">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="check-text">
						<text class="text_2" @tap.stop="agreement('zhucexieyikey')">《用户协议》</text>
						<text class="text_1">和</text>
						<text class="text_2" @tap.stop="agreement('yinsixieyikey')">《隐私政策》</text>
					</view>
				</view>
			</u--form>
			<!--支付宝-->
			<u--form labelPosition="left" :model="form" ref="aForm" :rules="rules" v-show="type==1">
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">用户姓名</view>
						<view class="inputBox">
							<input class="inputStyle" v-model="form.username" disabled color="#333"
								type="text" border="none"></input>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">支付宝账号</view>
						<view class="inputBox">
							<u--input class="inputStyle" v-model="form.aliPayAccount" placeholder="请输入支付宝账号" color="#333"
								type="text" border="none"></u--input>
						</view>
					</view>
				</u-form-item>
				<view class="zcxy">
					<view class="check-box">
						<u-checkbox-group size="14px" @change="checkChange">
							<u-checkbox :checked="form.checked" inactiveColor="#000000" labelColor="#000000"
								labelSize="12px" size="14px" activeColor="#C09B3A" shape="circle" label="已阅读并同意">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="check-text">
						<text class="text_2" @tap.stop="agreement('zhucexieyikey')">《用户协议》</text>
						<text class="text_1">和</text>
						<text class="text_2" @tap.stop="agreement('yinsixieyikey')">《隐私政策》</text>
					</view>
				</view>
			</u--form>
		</view>
		<view class="submit-bottom">
			<view class="submit-btn" @tap="open">提交</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		dsbankcardAdd,
		appcustomerbankcardBindingCard
	} from '../../api/user.js';
	import {
		sendPhoneCode,
		getUser
	} from '@/api/login.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				type: 0,//0 银行卡 , 1 支付宝
				bankshow: false,
				form: {
					bankName: "",
					settleAccount: "",
					loginCode: "",
					accountSign: "0", //	0卡号1账号
					checked: false,
					aliPayAccount: "" ,//支付宝账号
					username: ""  //用户真实姓名
				},
				loginCodeSrc: '',
				loginCodeUid: '',
				tips: '',
				rules: {
					
				},
				tipStr:'提示: 当前绑定银行卡,只能绑定一类卡,不能绑定二类卡',
				tipStr2:'提示: 当前绑定支付宝账号,需确保支付宝实名信息与app实名信息一致,否则将无法绑定!',
			}

		},
		mounted() {
			this.getLoginCode();
		},
		watch: {
			['form.cardNumber'](val) {
				this.$nextTick(() => {
					this.form.cardNumber = val.replace(/\D/g, '').replace(/....(?!$)/g, '$& ');
				});
			}
		},
		onLoad(options) {
			if(options.type){
				this.type = options.type;
					console.log(this.type,"绑定跳转类型")
			}
		},
		async onShow() {
			let res = await getUser()
			if (res.status == 200) {
				this.form.username = res.data.user.username
			}
		},
		methods: {
			confirm(e) {
				this.form.bankName = e.value[0].label;
				this.bankshow = false;
			},
			// 获取验证码
			codeChange(text) {
				this.tips = text;
			},
			// 用户协议和隐私政策
			agreement(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				});
			},
			checkChange() {
				this.form.checked = !this.form.checked;
			},
			// 重新获取图片验证码
			getLoginCode() {
				this.loginCodeUid = new Date().getTime()
				this.loginCodeSrc = `${this.baseApi}/code/loginCode?uid=${this.loginCodeUid}`
			},
			// 验证码倒计时
			getCode() {
				if (this.form.loginCode) {
					try {
						if (!this.form.reserveMobile) throw '请输入手机号'
						let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
						if (!reg.test(this.form.reserveMobile)) throw '手机号码格式不正确'
						// if (!this.form.loginCode) throw '请输入图形验证码'
					} catch (err) {
						this.$u.toast(err);
						return
					}
					this.getPhoneCode();
					// this.getLoginCode();
					// this.show = true;
					// this.isFocus = true
				} else {
					this.$u.toast('请输入图形验证码');
				}
			},
			getPhoneCode() {
				try {
					if (!this.form.loginCode) throw "请输入验证码";
				} catch (e) {
					this.$u.toast(e);
					return;
				}
				this.$refs.min_loading.open('正在发送短信验证码');
				let obj = {
					mobile: this.form.reserveMobile,
					uid: this.loginCodeUid,
					viewCode: this.form.loginCode
				}
				sendPhoneCode(obj).then(res => {
					if (res.data.success) {
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.show = false
					} else {
						this.$u.toast(res.data.msg);
						this.form.loginCode = "";
						this.getLoginCode()
						// this.$refs.uCode.reset();
					}
				}).finally(() => {
					// uni.hideLoading();
					this.$refs.min_loading.close();
				})
			},
			formatAccNo(accNo) {
				let result = '',
					index = 0;
				if (accNo != undefined && accNo != null) {
					for (let i = 0; i < accNo.length; i++) {
						result += accNo.charAt(i);
						index++;
						if (index == 4 && (i + 1 != accNo.length)) {
							result += " ";
							index = 0;
						}
					}
				}
				return result;
			},
			open() {
				let obj={};
				if(this.type==0){
					obj = {
						cardNumber: this.form.cardNumber.replace(/\s*/g, ""),
						reserveMobile: this.form.reserveMobile,
						verifyCode: this.form.verifyCode,
						loginCode: this.form.loginCode,
						type: 0
					}
					try {
						if (!obj.reserveMobile) throw '请输入手机号码'
						if (!obj.loginCode) throw '请输入图形验证码'
						if (!obj.verifyCode) throw '请输入短信验证码'
						if (!obj.cardNumber) throw '请输入银行卡号'
					} catch (e) {
						this.$u.toast(e);
						return
					}
				}
				if(this.type==1){
					obj = {
						aliPayAccount: this.form.aliPayAccount,
						type: 1
					}
					let reg = /^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
					try {
						if (!obj.aliPayAccount) throw '请输入支付宝账号'
						if(!reg.test(obj.aliPayAccount)) throw '请输入正确的支付宝账号'
					} catch (e) {
						this.$u.toast(e);
						return
					}
				}
				console.log(obj,"提交的表单信息")
				this.$refs.min_loading.open('绑定中');
				appcustomerbankcardBindingCard(obj).then(res => {
					if (res.data.success) {
						// this.$refs.uToast.show({
						// 	type: 'success',
						// 	message: "绑定成功！",
						// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						// });
						this.$u.toast('绑定成功！');
						setTimeout(() => {
							this.back();
						}, 700);
					} else {
						if (res.data.msg.includes('设置支付密码')) {
							this.$u.toast(res.data.msg);
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/setting/payPassword'
								})
							}, 1500)
						} else {
							this.$u.toast(res.data.msg);
						}
					}
				}).catch(err => {
					// this.$u.toast('网络错误');
					console.log(err)
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
		},
		computed: {
			...mapState(["hasLogin", "uerInfo"]),
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.con-box {
		min-height: 100vh;
		padding: 150upx 0upx 0;

		.form {
			padding: 0 30upx;

			.formInput {
				width: 100%;
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
				padding-bottom: 16upx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				color: #333;

				.label {
					font-size: 30upx;
					width: 100%;
					margin-bottom: 26upx;
				}

				.inputBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
				}
				.inputStyle{
					color: #333;
					padding-left: 0upx;
				}
				input {
					flex: 1%;
					font-size: 26upx;
					padding-left: 30upx;
					color: #333;
				}
			}

			.send-con {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.send {
					font-size: 26upx;
					color: #C09B3A;
				}
			}

			.imgCode {
				width: 100%;
				position: relative;
				overflow: hidden;

				input {
					width: 60%;
				}

				.image-box {
					padding: 10upx 10upx 10upx 0;
					position: absolute !important;
					right: 0 !important;
					bottom: 0 !important;
					height: 80upx;

					.codeImg {
						height: 100%;
					}
				}

			}
		}

		.zcxy {
			display: flex;
			width: 100%;
			height: 32upx;
			align-items: center;
			justify-items: center;
			margin-top: 200upx;

			.check-text {
				font-size: 24upx;
				color: #000000;

				.text_2 {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					text-align: center;
					color: #C09B3A;
				}


			}
		}

		.submit-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 20upx 30upx;
			background-color: #fff;

			.submit-btn {
				width: 100%;
				height: 80upx;
				background: #CEA539;
				border-radius: 10upx;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}
	}
</style>
